import React, { memo } from 'react';
import { DatePicker, Icon, Form, Select } from 'antd';
import moment from 'moment';

import Search from '@/pages/SalaryManage/components/SuperSearch';
import TwoColHead from '@/pages/SalaryManage/components/TwoColHead';
import { jobStatusEnum } from '@/pages/SalaryManage/enum';
import BaseMore from './baseMore';

const { MonthPicker } = DatePicker;
const jobStatusEnumList = jobStatusEnum.list();

const StatusSelect = () => (
    <Select>
        {jobStatusEnumList.map(item => (
            <Select.Option key={item.value} value={item.value}>
                {jobStatusEnum.getShowName(item.value)}
            </Select.Option>
        ))}
    </Select>
);

const CheckHeader = props => {
    const { form, period, searchModel, setSearchModel, dynamicQueryConditionsMapList = [] } = props;

    const { getFieldDecorator } = form;

    const onChange = (date, dateString) => {
        setSearchModel({
            ...searchModel,
            period: dateString
        })
    };

    const searchHandle = () => {
        const {
            dutyCode,
            employeeCode,
            positionCode,
            rankCode,
            hireDate,
            statusCode,
            department,
            leafSalaryItemId
        } = form.getFieldsValue();

        setSearchModel({
            ...searchModel,
            dutyCode,
            employeeCode,
            positionCode,
            rankCode,
            leafSalaryItemId,
            statusCode,
            hireDateBegin: hireDate?.[0] ? hireDate[0].format('YYYY-MM-DD') : null,
            hireDateEnd: hireDate?.[1] ? hireDate[1].format('YYYY-MM-DD') : null,
            departmentCode: department?.departmentId || ''
        })
    };

    // 1.设置默认选择月份
    const periodMoment = period ? moment(period) : null;

    const CustomLabel = ({ value }) => <span title={value}>{value}</span>;

    return (
        <Search.Wrapper onSearch={searchHandle}>
            <TwoColHead
                rightStyle={{ justifyContent: 'flex-start' }}
                left={
                    <Search.Commonly>
                        <Search.Item label="月份">
                            <MonthPicker
                                onChange={onChange}
                                suffixIcon={<Icon type="down" />}
                                value={periodMoment}
                                style={{ width: '110px' }}
                                allowClear={false}
                            />
                        </Search.Item>
                    </Search.Commonly>
                }
            />
            <BaseMore form={form} searchModel={searchModel}>
                <Search.Item label="员工状态">
                    {getFieldDecorator('statusCode', {
                        initialValue: null
                    })(StatusSelect())}
                </Search.Item>
                {dynamicQueryConditionsMapList.map(item => (
                    <Search.Item
                        label={<CustomLabel value={item.dynamicQueryConditionsName} />}
                        labelAlign="right"
                        key={item.dynamicQueryConditionsName}
                    >
                        {getFieldDecorator('leafSalaryItemId', { initialValue: searchModel.leafSalaryItemId })(
                            <Select>
                                <Select.Option value="">全部</Select.Option>
                                {Object.entries(item.dynamicQueryConditionSselectorsMap).map(it => (
                                    <Select.Option key={it[0]} value={it[0]}>
                                        {it[1]}
                                    </Select.Option>
                                ))}
                            </Select>
                        )}
                    </Search.Item>
                ))}
            </BaseMore>
        </Search.Wrapper>
    );
};

export default memo(Form.create({})(CheckHeader));
